<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios构建过程</title>
</head>
<body>
    <script>
        //声明构造函数
        // 1. 创建出来的对象首先 可以  axios()
        // 2. 需要具备 Axios原型上的所有方法
        // 3. 需要具备 Axios实例上的所有属性

        function Axios(config){
            // 默认配置项
            this.defaults = config;
            // 拦截器
            this.interceptors = {
                response:'响应拦截器',
                request:'请求拦截器'
            }
        }
        // 创建请求方法
        Axios.prototype.request = function(config){
            console.log('发送请求')
        }
        // 批量模拟创建请求方法
        let methods = ['put','post','patch','delete','get'];
        methods.forEach(method=>{
            Axios.prototype[method] = function(){
                console.log('。。。。。');
            }
        })

        function createInstance(config){
            // 使用 new 实例化一个对象
            let context = new Axios(config);
            // 通过 request来创建一个 instance, 并让instance方法的内部this 指向 context实例
            let instance = Axios.prototype.request.bind(context);
            // 将Axios.prototype 原型上的属性和方法，加载到 instance 身上
            // console.log(   Object.keys(Axios.prototype)    );
            Object.keys(Axios.prototype).forEach(method=>{
                instance[method] = Axios.prototype[method];
            })
            // 获得 context身上所有的属性 defaults  interceptors
            // console.log(  Object.keys(context)  );
            Object.keys(context).forEach(key=>{
                instance[key] = context[key];
            })
            return instance;
        }
        // 创建一个 axios实例
        let axios = createInstance({method:'get'});
        // 新增私有属性
        axios.Axios = Axios;
        // 新增 create方法
        axios.create = function(config){
            return createInstance(config);
        }

        console.dir(axios);



    </script>
</body>
</html> 